<template>
  <div class="main">
    <div class="middle">
      <div class="middle_title"></div>
      <div class="middle_head">
        <div class="hl_title2">
          <h3>新型冠状疫病毒</h3>
        </div>
        <div class="hl_title"><h1>上海市{{title}}疫情实时大数据</h1></div>
        <div class="hl_back" @click="linkToHome()">
          <div class="hl_title3"><span class="span1">回疫情首页</span></div>
        </div>
      </div>
      <div class="middle_body">
        <div style="margin: 25px auto">
          <h2>疫情信息</h2>
          <div class="hl_data">
            <div class="hl_new_diagnosis">
              <span>新增确诊</span>
              <br />
              <div class="hl_data_1">{{ shanghai.newPatientCount }}</div>
            </div>
            <div class="hl_now_diagnosis">
              <span>现有确诊</span>
              <br />
              <div class="hl_data_2">{{ shanghai.presentPatientCount }}</div>
            </div>
            <div class="hl_had_diagnosis">
              <span>累计确诊</span>
              <br />
              <div class="hl_data_3">{{ shanghai.allPatientCount }}</div>
            </div>
            <div class="hl_cumulative_cure">
              <span>累计治愈</span>
              <br />
              <div class="hl_data_4">{{ shanghai.allCuredCount }}</div>
            </div>
            <div class="hl_cumulative_died">
              <span>累计死亡</span>
              <br />
              <div class="hl_data_5">{{ shanghai.allDeathCount }}</div>
            </div>
          </div>
        </div>
        <div class="hl_data_ins">
          新增数据统计周期为昨日{{ StatisticalDate }}
        </div>
        <div style="margin: 25px auto">
          <h2>疫情速报</h2>
          <div>
            <!-- "viewId": "1539506998585245698",
            "areaId": "1100000",
            "areaName": "浦东区",
            "parentId": "0",
            "parentName": null,
            "areaLevel": 1,
            "newPatientCount": 0,
            "newDeathCount": 1,
            "newCuredCount": 0,
            "presentPatientCount": 11,
            "allPatientCount": 15,
            "allCuredCount": 2,
            "allDeathCount": 2,
            "building": "1100000",
            "isolationLevel": 3,
            "transferCount": 5,
            "stayCount": 10,
            "StatisticalDate": "2022-06-22",
            "transferCountToday": 0, -->
            <el-table
              :data="showTable"
              style="width: 100%; font-size: 20px"
              size="medium"
            >
              <el-table-column align="center" label="地区" width="200">
                <template slot-scope="scope">
                  <span class="hl_link" @click="linkRegion(scope.row.areaId)"
                    >{{ scope.row.areaName }} ></span
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="newPatientCount"
                align="center"
                label="新增患者"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="newCuredCount"
                align="center"
                label="新增治愈"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="presentPatientCount"
                align="center"
                label="现有确诊"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="allPatientCount"
                align="center"
                label="累计确诊"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="allCuredCount"
                align="center"
                label="累计治愈"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="区域等级"
                width="auto"
              >
                  <template slot-scope="scope">
                <el-tag :type="scope.row.isolationLevel | statusFilter">{{scope.row.isolationLevel | formatStata}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.isolationLevel == '2' || scope.row.isolationLevel == '3'"
                  >
                    <span>{{scope.row.building}}</span>
                  </div>
                  <div
                    v-else
                  >
                    <div style="font-size:1">暂无封控楼栋</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div @click="showAll = !showAll" class="show-more">
          <span>{{ word }}></span>
        </div>
        <!-- <div style="background:#f8f9fa">
          <div class="hl_choose_background"> -->
        <!-- <div @click="showOne = !showOne" :class="showOne?'':''"></div> -->
        <!-- <div  @click="showOne = !showOne" :class="showOne?'hl_choose_map1':'hl_choose_map2'">
              <span>现有确诊</span>
             </div>
             <div @click="showOne = !showOne" :class="showOne?'hl_choose_map2':'hl_choose_map1'">
              <span>新增确诊</span>
             </div>
          </div>
          <div id="shanghaimap" style = "width:100%;height:702px"></div>
        </div> -->
        <div>
          <div class="hl_trend_background">
            <!-- <div @click="showOne = !showOne" :class="showOne?'':''"></div> -->
            <div
              @click="trendOne()"
              :class="trend1 ? 'hl_choose_line1' : 'hl_choose_line2'"
            >
              <span>新增趋势</span>
            </div>
            <div
              @click="trendTwo()"
              :class="trend2 ? 'hl_choose_line1' : 'hl_choose_line2'"
            >
              <span>遗留趋势</span>
            </div>
            <div
              @click="trendThree()"
              :class="trend3 ? 'hl_choose_line1' : 'hl_choose_line2'"
            >
              <span>转运趋势</span>
            </div>
          </div>
          <div id="line" style="width: 100%; height: 702px"></div>
        </div>
        <!-- <div style="margin: 25px auto">
          <div style="display: inline-block; margin-right: 20px">
            <h2>上榜小区</h2>
          </div>
          <div style="display: inline-block">
            <download-excel
              class="export-excel-wrapper"
              :data="outStandingData"
              :fields="json_fields"
              title="上榜小区"
              :name="name"
            >
              <el-button type="primary" size="medium">导出excle</el-button>
            </download-excel>
          </div>
        </div>
        <div> -->
          <!-- "viewId": "1539506998585245698",
            "areaId": "1100000",
            "areaName": "浦东区",
            "parentId": "0",
            "parentName": null,
            "areaLevel": 1,
            "newPatientCount": 0,
            "newDeathCount": 1,
            "newCuredCount": 0,
            "presentPatientCount": 11,
            "allPatientCount": 15,
            "allCuredCount": 2,
            "allDeathCount": 2,
            "building": "1100000",
            "isolationLevel": 3,
            "transferCount": 5,
            "stayCount": 10,
            "StatisticalDate": "2022-06-22",
            "transferCountToday": 0, -->
          <!-- <el-table
            :data="outStandingData"
            style="width: 100%; font-size: 20px"
            size="medium"
          >
            <el-table-column
              prop="pareaName"
              align="center"
              label="街道"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="areaName"
              align="center"
              label="小区"
              width="auto"
            >
            </el-table-column>
          </el-table>
        </div> -->
      </div>

      <div class="foot">
        <div class="elink">
          <a href="">填报疫情信息</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import shanghai from "D:/develop/疫情防控管理系统/汇报2/epidemic-management-system2/public/static/shanghai.json"
import {
  getAreaEpidemic,
  getPresentView,
  getInDeCuCount,
} from "@/api/map/index";
// 在 vue组件中引入
export default {
   filters: {
    statusFilter (status) {
      const statusMap = {
        0: "info",
        1: "success",
        2: "warning",
        3: "danger",
      };
      return statusMap[status];
    },
    // 状态显示转换
    formatStata (status) {
      const statusMap = {
        0: '暂未更新',
        1: '防控区',
        2: '管控区',
        3: '封控区'
      };
      return statusMap[status]
    }
  },
  data() {
    return {
      // option 也可以在这里定义
      // newDiagnosis:1,
      shanghai: "",
      json_fields: {
        街道: "pareaName",
        小区: "areaName",
      },
      name: "",
      title:"",
      // newPatientCount:0,
      // newDeathCount: 0,
      // newCuredCount: 0,
      // presentPatientCount: 0,
      // allPatientCount:0,
      // allCuredCount: 0,
      // allDeathCount: 0,
      areaId: null,
      tabledata: [],
      showAll: false,
      showOne: true,
      trend1: true,
      trend2: false,
      trend3: false,
      outStanding: false,
      outStandingData: [],
      StatisticalDate: "",
      mapData1: [],
      mapData2: "",
      myCharts: null,
      myLineCharts: null,
      date: [],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
    };
  },
  created() {
    this.areaId = this.$route.query.areaId;
    this.fetchData();
  },
  methods: {
    fetchData() {
      getAreaEpidemic(this.areaId, this.outStanding).then((response) => {
        this.shanghai = response.list[0];
        this.title = response.list[0].areaName;
        // this.name = response.list[0].areaName + "上榜小区.xls";
        this.tabledata = response.list[0].children;
        // console.log(this.tabledata);
        this.StatisticalDate = response.list[0].StatisticalDate;
      });
      // getAreaEpidemic(this.areaId, !this.outStanding).then((response) => {
      //   response.list[0].children.forEach((str) => {
      //     if (str.children) {
      //       str.children.forEach((com) => {
      //         let expandData = {
      //           pareaName: com.parentName,
      //           areaName: com.areaName,
      //         };
      //         this.outStandingData.push(expandData);
      //       });
      //     }
      //   });
      // });
      // console.log(this.mapData1)
    },
    linkToHome() {
      this.$router.push("/map");
    },
    echartsInit() {
      // this.$echarts.registerMap('shanghai',shanghai)
      this.myLineCharts = this.$echarts.init(document.getElementById("line"));
      // this.myCharts = this.$echarts.init(document.getElementById('shanghaimap'))
      // var option = {
      //     series: [
      //       {
      //         name: '上海市疫情分布图',
      //         type: 'map',
      //         map: 'shanghai',
      //         label: {
      //           show: true
      //         },
      //       }
      //     ]
      // }
      var option1 = {
        title: {
          text: "新增患者趋势图",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
      };
      this.myLineCharts.setOption(option1);
      // this.myCharts.setOption(option)
    },
    async getData() {
      // await getAreaEpidemic(0,this.outStanding).then((response) => {
      //   this.tabledata = response.list[0].children
      //   this.StatisticalDate = response.list[0].StatisticalDate
      // })
      // this.tabledata.forEach(item =>{
      //     let everyData = {}
      //     everyData.name = item.areaName
      //     everyData.value = item.presentPatientCount
      //     this.mapData1.push(everyData)
      // })
      await getInDeCuCount(this.areaId, 7).then((response) => {
        // console.log(response.obj);
        let newPatientCount = response.obj["新增患者"];
        let newCuredCount = response.obj["新增治愈"];
        let newDeathCount = response.obj["新增死亡"];
        let stayCount = response.obj["遗留人数"];
        let transferCount = response.obj["当日转运"];
        let map = new Map();
        for (let key in newPatientCount) {
          map.set(key, newPatientCount[key]);
        }
        let map1 = new Map();
        for (let key in newCuredCount) {
          map1.set(key, newCuredCount[key]);
        }
        let map2 = new Map();
        for (let key in newDeathCount) {
          map2.set(key, newDeathCount[key]);
        }
        let map3 = new Map();
        for (let key in stayCount) {
          map3.set(key, stayCount[key]);
        }
        let map4 = new Map();
        for (let key in transferCount) {
          map4.set(key, transferCount[key]);
        }
        this.date = [...map.keys()];
        this.value1 = [...map.values()];
        this.value2 = [...map1.values()];
        this.value3 = [...map2.values()];
        this.value4 = [...map3.values()];
        this.value5 = [...map4.values()];
      });
      this.setEcharts();
    },
    setEcharts() {
      // 3.1设置配置项  每次都会合拼不同的配置项
      // let options={
      //   tooltip: {
      //   trigger: 'item',
      //   formatter: '{b}{c} (p / km2)'
      //   },
      //   toolbox: {
      //     show: true,
      //     orient: 'vertical',
      //     left: 'right',
      //     top: 'center',
      //     feature: {
      //       dataView: { readOnly: false },
      //       restore: {},
      //       saveAsImage: {}
      //     }
      //   },
      //   visualMap: {
      //     min: 0,
      //     max: 20,
      //     text: ['High', 'Low'],
      //     realtime: false,
      //     calculable: true,
      //     inRange: {
      //       color: ['lightskyblue', 'yellow', 'orangered']
      //     }
      //   },
      //     // 系列
      //     series:[
      //       {
      //         data:this.mapData1//设置系列数据
      //       }
      //     ]
      //   }
      let options1 = {
        legend: {
          data: ["新增患者", "新增死亡", "新增治愈"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增患者",
            type: "line",
            data: this.value1,
          },
          {
            name: "新增死亡",
            type: "line",
            data: this.value2,
          },
          {
            name: "新增治愈",
            type: "line",
            data: this.value3,
          },
        ],
      };

      // this.myCharts.setOption(options)
      this.myLineCharts.setOption(options1);
    },
    // linkRegion(areaId) {
    //   this.$router.push({ path: "/region", query: { areaId: areaId } });
    // },
    trendOne() {
      this.trend1 = true;
      this.trend2 = false;
      this.trend3 = false;
      this.changeLine();
    },
    trendTwo() {
      this.trend1 = false;
      this.trend2 = true;
      this.trend3 = false;
      this.changeLine();
    },
    trendThree() {
      this.trend1 = false;
      this.trend2 = false;
      this.trend3 = true;
      this.changeLine();
    },
    changeLine() {
      let options = {
        title: {
          text: "新增患者趋势图",
        },
        legend: {
          data: ["新增患者", "新增死亡", "新增治愈"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增患者",
            type: "line",
            data: this.value1,
          },
          {
            name: "新增死亡",
            type: "line",
            data: this.value2,
          },
          {
            name: "新增治愈",
            type: "line",
            data: this.value3,
          },
        ],
      };
      let options2 = {
        title: {
          text: "遗留趋势图",
        },
        legend: {
          data: ["遗留趋势"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "遗留趋势",
            type: "line",
            data: this.value4,
          },
                    {
            name: "新增死亡",
            type: "line",
            data: [],
          },
          {
            name: "新增治愈",
            type: "line",
            data: [],
          },
        ],
      };
      let options3 = {
        title: {
          text: "转运趋势图",
        },
        legend: {
          data: ["转运趋势"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "转运趋势",
            type: "line",
            data: this.value5,
          },
                    {
            name: "新增死亡",
            type: "line",
            data: [],
          },
          {
            name: "新增治愈",
            type: "line",
            data: [],
          },
        ],
      };
      if (this.trend1) {
        this.myLineCharts.setOption(options);
      } else if (this.trend2) {
        this.myLineCharts.setOption(options2);
      } else {
        this.myLineCharts.setOption(options3);
      }
    },
  },

  computed: {
    showTable: function () {
      if (this.showAll == false) {
        var showList = [];
        if (this.tabledata.length > 3) {
          for (var i = 0; i < 3; i++) {
            showList.push(this.tabledata[i]);
          }
        } else {
          showList = this.tabledata;
        }
        return showList;
      } else {
        return this.tabledata;
      }
    },
    word: function () {
      if (this.showAll == false) {
        return "点击展开";
      } else {
        return "点击收起";
      }
    },
  },
  mounted() {
    this.echartsInit();
    this.getData();
  },
};
</script>
<style scoped>
.main {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  background-color: #c9edfc;
}
.middle {
  min-height: 31.25rem;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fefefe;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
}
div {
  display: block;
}
.middle {
  background: #c9edfc;
}
.middle .middle_title {
  color: #fff;
  position: relative;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  padding: 0;
  height: 187px;
  margin-bottom: -0.625rem;
  /* background-color: #10aeb5; */
  background-image: url(https://img1.baidu.com/it/u=2263760148,3468212087&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=427);
}
.middle_body {
  background-color: #fff;
  position: relative;
  /* border: 2px solid red; */
  border-radius: 0.625rem;
  margin: -0.5rem 0 4rem 0;
  padding: 0.917rem 1.0625rem 1.875rem;
}
.middle_head {
  color: #fff;
  position: relative;
  padding: 0;
  height: 100px;
  margin-bottom: -0.625rem;
  background-color: #c9edfc;
}
.hl_title {
  content: attr(data-text);
  margin: 0px 17px 0px 5px;
  display: block;
  font-size: 1.3rem;
  position: absolute;
  color: #017984;
  top: 0;
}
.hl_title2 {
  display: block;
  margin-left: 22px;
  font-size: 1rem;
  color: #0b8591;
  letter-spacing: 0.125rem;
}
.hl_title3 {
  letter-spacing: 0.125rem;
}
.hl_back {
  padding: 0.5rem 0.5rem;
  position: absolute;
  color: #017984;
  top: 40%;
  left: 89%;
  background-image: linear-gradient(270deg, #8fd6f5, #77d2f9);
  border: 1px solid rgba(126, 229, 238, 0.3);
  border-radius: 20px;
}
.span1 {
  font-size: 1.2rem;
  color: #017984;
  font-weight: bolder;
}
.hl_data {
  display: flex;
  flex-wrap: nowrap;
}
.hl_new_diagnosis,
.hl_now_diagnosis,
.hl_had_diagnosis,
.hl_cumulative_cure,
.hl_cumulative_died {
  border: black;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 25%;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  text-align: center;
}
span {
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: 0.625rem;
  color: #333;
  position: relative;
}
.hl_data_1,
.hl_data_2,
.hl_data_3 {
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-top: 0.625rem;
  color: red;
}
.hl_data_4 {
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-top: 0.625rem;
  color: aquamarine;
}
.hl_data_5 {
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-top: 0.625rem;
  color: #333;
}
.hl_data_ins {
  align-items: center;
  color: #999;
  font-size: 0.8125rem;
  height: 0.8125rem;
  line-height: 0.8125rem;
  vertical-align: middle;
}
.show-more {
  text-align: center;
  font-size: 0.938rem;
  line-height: 0.938rem;
  color: #555;
  margin-top: 0.25rem;
}
.hl_choose_background {
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  height: 3rem;
  box-sizing: border-box;
  padding: 2px;
  background: #e3e6eb;
  border-radius: 6px;
}
.hl_choose_map1 {
  margin: 1px;
  /* border: 1px solid black; */
  border-radius: 0.625rem;
  height: 2.7rem;
  line-height: 2.7rem;
  flex: 1 1 auto;
  text-align: center;
  font-weight: bold;
  background-color: #e3e6eb;
}
.hl_choose_map2 {
  margin: 1px;
  /* border: 1px solid black; */
  height: 2.7rem;
  line-height: 2.7rem;
  border-radius: 0.625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
.hl_link {
  font-size: 1.4rem;
  font-weight: bold;
  color: #10aeb5;
}
/* label::before{
      left: 50%;
  content: "\65B0\589E\786E\8BCA";
  position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

label::after{
      left: 0;
    border-radius: 6px;
    background: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    font-weight: 700;
  content: "新增确诊";
  position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
} */
.hl_choose {
  display: none;
  box-sizing: border-box;
}
.foot {
  height: 200px;
  background: #c9edfc;
}
.elink {
  height: 100px;
  line-height: 100px;
  border-radius: 0.625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
.elink a {
  font-size: 5ch;
  font-weight: 700;
}
.hl_trend_background {
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  height: 3rem;
  box-sizing: border-box;
  padding: 2px;
  background: #e3e6eb;
  border-radius: 6px;
}
.hl_choose_line2 {
  margin: 1px;
  /* border: 1px solid black; */
  height: 2.7rem;
  line-height: 2.7rem;
  border-radius: 0.625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
.hl_choose_line1 {
  margin: 1px;
  /* border: 1px solid black; */
  border-radius: 0.625rem;
  height: 2.7rem;
  line-height: 2.7rem;
  flex: 1 1 auto;
  text-align: center;
  font-weight: bold;
  background-color: #e3e6eb;
}
</style>